<template>
	<div class="inform" @click="system">
		<span class="hint" v-if="hintValue > 0">{{ hintValue | numbers }}</span>
		<i class="iconfont icon-news"></i>
	</div>
</template>
<script>
import { getMsgNotice } from "@/api/member";
import { iosapp } from '@/utils';
	export default{
		name: 'Inform',
		data(){ 
			return{
				hintValue : '',
				showApp   : window.sessionStorage.getItem('isapp'),
				uid       : window.localStorage.getItem('uid')
			}
		},
		filters: {
			numbers: (value) => {
				return value > 99 ? "99+" : value
			}
		},
		created()
		{
			this.uid && this.loadData();
		},
		methods:
		{
			loadData(){
				getMsgNotice(this.uid).then(res=>{
					this.hintValue = res.data.item;
				})
			},
			system()
			{

				if(this.showApp)
					iosapp('systemMessage');
				else
					this.$router.push('/member/news');

			}
		}

	}
</script>

<style lang="less">
	.inform{
		color: #fff;
		position:relative;
		.hint{
			background: #fff;
			color: #ff0036;
			font-size: 20/28rem;
			text-align:center;
			width: 50/28rem;
			height: 25/28rem;
			line-height: 25/28rem;
			position: absolute;
			top:-5/28rem;
			right: -15/28rem;
			border-radius: 15/28rem;
		}
		i{
			font-size: 52/28rem;
		}
	}
</style>